真想做好一个H5,你一定要会这个方法!
内容没加载好,网页就跳转进去了!一张张图片慢慢显示出来,整得你的H5做得很low……怎么破?
今天揭秘的正好是这个让很多iH5新老用户头疼的问题,如何灵活地调整预加载。温馨提示:一定要用iH5的3.0版工具做才行!
注:以下内容选自3.0 热心用户 heymu 在“iH5 Help”的回答。进入http://ih5qa.hiyime.com/,你会找到更多关于新工具使用的问题。
页面的预加载,有两种方法:
(1)使用系统自动的预加载,只要设置舞台的预加载。
(2)自定义每个页面单独的预加载,需要使用页面的加载事件。
一、系统自动的预加载
这里只需要选中舞台,设置它的属性。
填写预加载页数(N)后,案例会先加载完前N页,之后再进入首页。加载的进度,就是案例加载的进度,可以在“发布”的面板设置进度显示的样式:
注:iH5 3.0是免费让所有人使用和发布的,但自定义LOGO属于付费服务,需要购买企业套餐才可以设定。
需要注意的是:预加载除了在案例开始的时候进行,在案例播放过程中也会持续进行。
比如一个案例有10页,预加载设为3页。
当案例开始的时候,会加载前3页 (从对象树最下方开始算的前3页),然后才进入第1页;当用户进入第2页的时候,就会开始加载第4页,尽量保证当前有3页加载完毕。
所以案例播放至某一页的时候,它也会自动加载后面的几个页面。
二、页面的自定义加载
自定义加载,可以让每个页面在需要的时候才加载,并显示真实的加载进度。
如果要使用页面的自定义加载,要首先打开页面的“不参与预加载”属性,这样,系统预加载的时候,就会跳过这个页面了。
然后,我们需要在舞台或第一页添加页面预加载的动画。
比如以下案例中,我们加了一个首页。这个首页是普通的页面,在案例开始的时候就会加载出来,首页有两个按钮,分别跳转到场景一和场景二。
两个场景页面,都包含一个100张的图片序列,所以需要加载一段时间。但这两个场景,都设置了不参与预加载。
然后,在首页加一个加载动画。
注意,这个加载动画,需要独立于场景一和场景二页面,放在一个新的页面里。因为它要在场景一或场景二未加载完成时,开始播放。
然后,在场景一和场景二页面中分别加事件。如下图所示,设置在页面“开始加载”时,让加载动画显示;并设置“加载中”时,时间轴会根据加载进度来播放。
加载进度是一个0到1的数字,而我们在这里加的时间轴是10秒,所以要让时间轴跳至“加载进度*10秒”。
注:当页面触发事件是“加载中”,进行赋值时,值这一栏的“加载进度”不能手动输入,而需要点击右侧的下拉框选中“加载进度”这个属性才有效。
还有一个百分比的文本,要在页面加载时,把这个文本赋值为“加载进度*100”, 再加一个“%”表示加载进度是百分之几。
注:3.0版工具赋值的规则是用西文的单引号包围文本,并用加号连接不同的文本;数值则不需要用单引号包围。
由于系统获取的加载进度有很多小数位,这里加了一个round函数来四舍五入——用“round()”的括号包围赋值部分。
最后,返回首页的时候,得让原来的加载动画隐藏,并让时间轴跳回零点。
案例下载地址:
http://www.ih5.cn/editor3/app/workCopy/5554523
在电脑上登录iH5账号后,把上面这串地址粘贴在地址栏打开,这个案例就会下载到你的账号了!
快去试试吧~
手机版
电脑版